<template>
  <view>
    <view class="dp-cover">
      <button
        @click="goto"
        :data-url="params.hrefurl"
        :open-type="
          params.hrefurl == 'contact::'
            ? 'contact'
            : params.hrefurl == 'share::'
            ? 'share'
            : ''
        "
        class="dp-cover-cover"
        :style="{
          zIndex: 10,
          top: params.top + 'vh',
          left: params.left + 'vw',
          color: params.color,
          backgroundColor: params.bgcolor,
          width: params.width * 2.2 + 'rpx',
          height: params.height * 2.2 + 'rpx',
          margin:
            params.margin_y * 2.2 + 'rpx ' + params.margin_x * 2.2 + 'rpx',
          padding:
            params.padding_y * 2.2 + 'rpx ' + params.padding_x * 2.2 + 'rpx',
          fontSize: params.fontsize * 2.2 + 'rpx',
          border: params.border * 2.2 + 'rpx solid ' + params.bordercolor,
          borderRadius: params.radius * 2.2 + 'rpx',
        }"
      >
        <text v-if="params.style == 1" style="padding: 0 4rpx">{{
          params.text
        }}</text>
        <image
          v-if="params.style == 2"
          :src="params.pic"
          :style="{
            width: params.picwidth * 2.2 + 'rpx',
            height: params.picheight * 2.2 + 'rpx',
          }"
        />
      </button>
    </view>

    <uni-popup ref="popup" type="bottom" border-radius="20rpx">
      <view class="pop_kefu">
        <view class="pop_kefulist" v-if="kefuList.length > 0">
          <view
            v-for="(item, index) in kefuList"
            :key="index"
            @click="tokefu(item)"
            class="pop_list_item"
          >
            <image class="pic" :src="item.headimg" mode="aspectFill"></image>
            <view class="name">{{ item.nickname }}</view>
            <view v-if="item.no_read_count > 0" class="badge">
              {{ item.no_read_count > 99 ? "99+" : item.no_read_count }}
            </view>
          </view>
        </view>
        <view class="load_kefu" v-else>
          <uni-load-more status="loading" iconSize="28"></uni-load-more>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
var app = getApp();
export default {
  props: {
    params: {},
    data: {},
  },
  data() {
    return {
      kefuList: [],
    };
  },
  methods: {
    goto: function (e) {
      if (e.currentTarget.dataset.url == "kefu::") {
        this.openkefu();
      } else {
        app.goto(e.currentTarget.dataset.url);
      }
    },

    //#region 客服相关
    openkefu() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      if (uni.getStorageSync("mid")) {
        this.$refs.popup.open("top");
        this.getkefulist();
      } else {
        app.error("请先登录");
      }
    },
    getkefulist() {
      let that = this;
      app.get("kefu/getList", {}, function (res) {
        if (res.code == 200) {
          that.kefuList = res.data;
          let totalUnread = res.data.reduce((sum, kefu) => {
            return sum + (kefu.no_read_count || 0);
          }, 0);

          that.totalUnreadCount = totalUnread;
        }
      });
    },
    tokefu(data) {
      if (data.id) {
        app.goto(
          "/pagesChat/chat/index?id=" +
            data.id +
            "&type=1&name=" +
            data.nickname +
            "&headimg=" +
            data.headimg
        );
        this.$refs.popup.close();
      }
    },
    //#endregion
  },
};
</script>
<style lang="scss">
.dp-cover {
  height: auto;
  position: relative;
}
.dp-cover-cover {
  position: fixed;
  z-index: 99999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pop_kefulist {
  background-color: #fff;
  margin: 0 auto;
  margin-bottom: 130rpx;
  border-radius: 60rpx;
  width: 80vw;

  .pop_list_item {
    display: flex;
    align-items: center;
    gap: 20rpx;
    padding: 20rpx;
    border-bottom: #e7e7e7 2rpx solid;

    .pic {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .name {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &:last-child {
      border-bottom: none;
    }

    .badge {
      min-width: 36rpx;
      height: 36rpx;
      background-color: #e60012;
      color: white;
      border-radius: 18rpx;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 6rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
    }
  }
}
</style>
